<template>
	<view class="xx" v-if="borderSwitch==0">
		<view class="active" style="box-sizing: border-box; width: 750rpx; padding: 0 10px;">
			<!-- 健康资讯 列表 -->
			<view class="active-list"
				  style="width: 100%;">
				<view v-for="item in activeList" :key="advPlatinfosId" @click="checkInfo(item.advPlatinfosId)">
					<!-- 列表项 -->
					<view class="active-list-item flex-row" style="width: 100%;height: 100px;border-bottom: 1px solid #aaa;">
						<!-- 左边图片 -->
						<view class="active-list-item-image" style="width: 100px;height: 80px;">
							<image :src="baseUrl+item.photoimage" style="width: 80px;height: 80px;"></image>
						</view>
						<!-- 右边内容 -->
						<view class="active-list-item-right flex-column" style="flex: 1; height: 80px;align-items: flex-start;">
							<!-- 正文 -->
							<view class="item-right-content" style="height: 60px; font-weight: 550;">
								{{item.title}}
							</view>
							<!-- 底部 -->
							<view class="item-right-bottom flex-row" style="width: 100%; height: 20px; font-size: 12px;color: #aaa;">
								<!-- 日期 -->
								<view class="bottom-data">
									<text class="bottom-data-text">{{formatDateTime(item.pubDatetime)}}</text>
								</view>
								<!-- 阅读点赞量 -->
								<view class="bottom-info">
									<!-- <text class="bottom-info-read" style="margin-right: 10px;">
										阅读 6.2万
									</text> -->
									<text class="bottom-info-good">
										赞 {{item.plikes}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	<!-- <view class="live" style="width: 750rpx;position: relative;height: 90vh;overflow: auto;"> -->
	<view class="live live-index" style="width: 750rpx; position: relative;" v-if="borderSwitch==1">
		<!-- 顶部导航栏 -->
		<view class="tab-bar flex-row" style="width: 750rpx;position: sticky;top: 0;
											  left: 0;z-index: 9999;
											  background-color: rgba(255, 255, 255, .7);
											  backdrop-filter: blur(15px);
											  -webkit-backdrop-filter: blur(15px);">
			<!-- 三个导航按钮 -->
			<view class="tab-bar-body flex-row-around" style="width: 750rpx;height: 30px;">
				<view :class="{'tab-bar-item': 1===1, 'tab-bar-item-active': tabStatus===1}" @click="tabChange(1)">
					开始直播
				</view>
				<view :class="{'tab-bar-item': 1===1, 'tab-bar-item-active': tabStatus===2}" @click="tabChange(2)">
					直播列表
				</view>
				<view :class="{'tab-bar-item': 1===1, 'tab-bar-item-active': tabStatus===3}" @click="tabChange(3)">
					预约直播
				</view>
			</view>
		</view>
		<view class="loading" style="position: relative; width: 750rpx;height: 100vh;text-align: center;" v-if="isLoading">
			<view class="text position-center" style="width: 750rpx;">
				加载中...
			</view>
		</view>
		<!-- 直播列表 -->
		<view class="live-content live-body" v-if="tabStatus===2 && !isLoading">
			<view class="switch" 
				  style="margin-bottom: 10px;display: flex;align-items: center;
						  justify-content: flex-end;">
				<text style="font-size: 14px;font-weight: bold;
					         color: #aaa;">
					显示已停播
				</text>
				<switch style="transform:scale(0.7)"
					    :checked="switchValue==1" 
					    @change="switchValue=switchValue==0?1:0" />
			</view>
			<view class="live-list flex-row-graid"  style="width: 100%;">
				<view @click="clickLiving(item)" v-for="item in liveList" :key="item.advBroadcastId">
					<view class="live-list-item" style="width: 330rpx;height: 235px;margin-bottom: 15px;
														position: relative;box-shadow: 0 0 10px 0 #ccc;
														border-radius: 10px;overflow: hidden;">
						<!-- 大图 -->
						<view class="live-list-item-bigimg" style="width: 100%;height: 160px;">
							<image :src="baseUrl+item.image" style="width: 100%;height: 100%;"></image>
						</view>
						<!-- 直播信息 -->
						<view class="live-list-item-info">
							<view class="info-title flex-column-around" style="width: 100%;height: 40px;text-align: center;padding: 5px 0;box-sizing: border-box;">
								<text>{{ item.title }}</text>
							</view>
							<view class="info-liver" style="width: 100%;height: 30px;display: flex;justify-content: start;align-items: center;">
								<view class="info-liver-icon" style="width: 60rpx;height: 30px;margin-left: 10rpx;">
									<image :src="item.memberImage" style="width: 100%;height: 100%;"></image>
								</view>
								<view class="info-liver-nickname hidden-text" style="width: 140rpx; height: 30px;text-align: center;line-height: 30px;color: #aaa;">
									<text>{{ item.memberName }}</text>
								</view> 
								<view class="line-num flex-row" style="justify-content: flex-start; width: 120rpx; height: 30px;text-align: center;line-height: 30px;color: #aaa;">
									<view class="line-num-icon">
										<uni-icons
											type="person" 
											size="20"></uni-icons>
									</view>
									<view class="live-num-count">
										{{item.persons?item.persons:'0'}}
									</view>
								</view>
							</view>
						</view>
						<!-- 标签 -->
						<view :class="{'live-label': 1===1,'live-label-y': item.broadstatus===3,'live-label-ok': item.broadstatus===2,'live-label-living': item.broadstatus===1}">
							{{ item.broadstatus === 1 ? '直播中' : item.broadstatus === 2 ? '未开播' : '已停播' }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 预约直播 -->
		<view class="live-reservation live-body" v-if="tabStatus===3 && !isLoading">
			<view class="title">
				已购设备
			</view>
			<view class="buy-device" style="position: relative; box-sizing: border-box; width: 700rpx;height: 80px;">
				<view class="buy-device-body position-center" style="box-sizing: border-box; 
														width: 700rpx; background-color: #eee;
														height: 60px; border-radius: 5px;
														box-shadow: 0 0 10px 0 #eee;">
					<view class="buy-device-select position-center"
						  style="width: 600rpx;
								 font-size: 20px;background-color: white;z-index: 999;">
						<uni-data-select
							style="z-index: 998;"
							v-model="deviceChoseValue"
							:localdata="deviceList"
							@change="deviceChange"
							placeholder="请选择设备"
							emptyTips="暂无设备"
							:clear="false"
						></uni-data-select>
					</view>
				</view>
			</view>
			<!-- 已购内容产品 -->
			<view class="title">
				已预约直播
			</view>
			<view class="reservation-item" v-for="item in reservationList" :key="item.advResevbroadcastId">
				<view @click="playLive(item)" >
					<view class="top flex-row">
						<view class="liver-info flex-row">
							<view class="liver-icon">
								<image :src="baseUrl+item.memberImage" mode=""></image>
							</view>
							<view class="liver-name">
								{{item.memberName}}
							</view>
						</view>
						<view class="live-status">
							{{item.boradstatus === 1 ? '直播中' : '未开始'}}
						</view>
					</view>
					<view class="center flex-column-around">
						<view class="live-content">
							{{item.content}}
						</view>
						<view class="live-time">
							{{item.begintime}}
						</view>
					</view>
					<view class="bottom">
						<view class="live-image">
							<image :src="baseUrl+item.image" mode=""></image>
						</view>
					</view>
				</view>
				<view v-if="item.syncFlag" class="do flex-row-around" style="width: 100%;height: 50px;background-color: #eee;
														border-radius: 10px;box-shadow: 0 0 10px 0 #ccc;">
					<view @click="cancel(item)" v-if="item.syncFlag == 1" class="cancel" style="width: 100px;height: 34px;background-color: orangered;
												border-radius: 6px;color: white;font-weight: bold;
												text-align: center;line-height: 34px;box-shadow: 0 0 10px 0 #aaa;">	
						取消同步
					</view>
					<view @click="upload(item)" v-if="item.syncFlag == 0" class="uoload" style="width: 100px;height: 34px;background-color: limegreen;
												border-radius: 6px;color: white;font-weight: bold;
												text-align: center;line-height: 34px;box-shadow: 0 0 10px 0 #aaa;">
						同步到设备
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <custom-tabbar></custom-tabbar> -->
	
</template>

<script>
	import { BASE_IMAGE_URL, BASE_URL, GET_USER_INFO } from '../../utils/CommonValues.js';
	import request, { GET } from '../../utils/request.js';
	export default {
		data() {
			return {
				activeList: [],
				borderSwitch: 0,
				switchValue: 0,
				deviceList: [
				],
				deviceChoseValue: '',
				userInfo: {},
				baseUrl: '',
				isLoading: false,
				tabStatus: 2,
				liveList:[], // 直播信息列表
				reservationList: [],
				pageSize: 10, // 取的数据长度
				pageNum: 1, // 取的数据页数
			}
		},
		onReachBottom() {
			console.log("已经到达底部了")
			// 到达底部重新继续加载数据
			if(this.tabStatus === 2) {
				this.getList();
			}
			if(this.tabStatus === 3) {
				if(this.deviceChoseValue) {
					this.getUserLiveByDevicesno(this.deviceChoseValue)
				} else {
					this.getReservationList();
				}
			}
		},
		onLoad(option) {
			const page = option.page;
			console.log(page, "页面")
			this.baseUrl = BASE_IMAGE_URL;
			// this.getList();
			this.getBorderSwitch();
			setInterval(() => {
				this.getBorderSwitch();
			}, 2000);
			this.getBorderList();
			GET_USER_INFO().then(response => {
				this.userInfo = response;
				if(page) {
					this.tabChange(3);
				}
			})
		},
		onShow() {
			console.log("onShow触发了",this.tabStatus,this.deviceChoseValue)
			// 在页面重新显示的时候需要重新拉取数据
			this.pageNum = 1;
			this.liveList = [];
			this.getList();
			GET_USER_INFO().then(response => {
				this.userInfo = response;
			})
			if(this.tabStatus==3 && this.deviceChoseValue) {
				this.getUserLiveByDevicesno(this.deviceChoseValue)
			}
		},
		watch: {
			switchValue(value) {
				console.log("修改后的值", value)
				this.pageSize = 10;
				this.pageNum = 1;
				this.liveList = [];
				this.getList();
			}
		},
		methods: {
			getBorderList() {
				request.GET(`/system/platinfos/list`, {
							infoSection: 3
						}).then(response=> {
							this.activeList = response.rows;
							console.log(response.rows, "资讯的值")
						})
			},
			checkInfo(id) {
				uni.navigateTo({
					url: '/pages/index/informationDetails/informationDetails?id='+id
				})
			},
			formatDateTime(isoString) {
			  // const date = new Date(isoString);
			  // const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
			  // const formatter = new Intl.DateTimeFormat('zh-CN', options);
			  // return formatter.format(date);
			  return isoString.replace('T', '  ')
			},
			getBorderSwitch() {
				request.GET(`/system/company/list`)
					   .then(response => {
						   // console.log(response, "导航信息")
						   this.borderSwitch = response.rows[0].broadSwitch
						   if(this.borderSwitch==1) {
						   	uni.setTabBarItem({
						   		index: 3,
						   		text: '直播',
						   		success() {
						   			// console.log("隐藏成功")
						   		},
						   		fail() {
						   			// console.log("隐藏失败")
						   		}
						   	})
						   } else {
							   uni.setNavigationBarTitle({
							   	title: '资讯'
							   })
							   uni.setTabBarItem({
							   	index: 3,
							   	text: '资讯',
							   	success() {
							   		// console.log("隐藏成功")
							   	},
							   	fail() {
							   		// console.log("隐藏失败")
							   	}
							   })
						   }
					   })
			},
			// 根据设备编号获取预约直播
			getUserLiveByDevicesno(e) {
				request.GET(`/system/broadcast/broadcast/${e}/${this.userInfo.advMembersId}`, {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						reasonable: false
					}).then(response => {
						   this.reservationList = response.data;
						   // this.reservationList.push(...response.data)
						   // this.pageNum = this.pageNum + 1;
					   })
			},
			// 取消上传
			cancel(item) {
				console.log("取消上传")
				uni.showModal({
					title: `取消同步主播[${item.memberName}]的直播在设备[${this.deviceChoseValue}]?`,
					confirmText: '是',
					success: (e) => {
						if(e.confirm) {
							request.DELETE(`/system/devicerelation/removebyid/${this.deviceChoseValue}/${item.advBroadcastId}`, null)
									.then(response => {
										console.log(response)
										this.deviceChange(this.deviceChoseValue);
									})
						}
					}
				})
			},
			// 上传
			upload(item) {
				uni.showModal({
					title: `同步主播[${item.memberName}]的直播到设备[${this.deviceChoseValue}]?\n
							(需要10秒钟左右才能同步到设备，请耐心等待)`,
					confirmText: '是',
					success: (e) => {
						if(e.confirm) {
							request.PUT(`/system/devicerelation/synclive`, {
								advMembersId: this.userInfo.advMembersId,
								devicesno: this.deviceChoseValue,
								advBroadcastId: item.advBroadcastId
							}).then(res => {
							    uni.showToast({
								   title: res.message,
								   icon: 'none'
							    })
							    this.deviceChange(this.deviceChoseValue);
							})
						}
					}
				})
			},
			// 已购设备数据改变
			deviceChange(e) {
				this.deviceChoseValue = e;
				console.log("设备", e)
				this.getUserLiveByDevicesno(this.deviceChoseValue)
			},
			// 获取已购设备的id
			getDeviceno() {
				request.GET(`/system/inoutstock/getdeviceno/${this.userInfo.advMembersId}`, null)
				.then(response => {
				   console.log(response)
				   const data = response.data;
				   this.deviceList = data.map(item => {
					   return {
						   value: item.devicesno,
						   text: item.productName + '-' + item.productModel + '-' + item.devicesno
					   }
				   })
			   })
			},
			// 检测直播状态
			clickLiving(live) {
				console.log(live.advMembersId)
				/*
					首先判断当前的直播状态
						如果是为开播状态
							直接进入直播
						如果是未开播状态
							首先需要判断当前直播是否已经预约
							如果没有预约那么就弹窗显示 是否要预约该直播
							如果已经预约了就显示直播暂未开始
				 */	
				if(live.broadstatus == 1) {
					// 直播中 直接进入直播
					uni.navigateTo({
						url: '/pages/live/playing/playing?broadUrl=' + live.broadUrl + '&borderMembersId=' + live.advMembersId
					})
				}
				if(live.broadstatus == 2) {
					// 未开播
					// 查询是否已经预约该直播\
					if(!this.userInfo.advMembersId) {
						uni.showModal({
							content: '请先登录'
						})
						return;
					}
					GET_USER_INFO().then(response =>{
						request.GET(`/system/reservbroadcast/isreservation/${response.advMembersId}/${live.advBroadcastId}`)
							   .then(res => {
								   if(res.data) {
									   // 表示已经预约了
									   uni.showModal({
									   	title: '提示',
									   	content: '直播未开始',
									   	confirmText: '确定'
									   })
								   } else {
									   // 未预约, 询问是否需要预约
									   uni.showModal({
									   	title: '提示',
									   	content: '直播未开始, 是否预约直播',
									   	showCancel: true,
									   	confirmText: '预约',
									   	success: (res) => {
									   		var yes = res.confirm;
									   		if(yes) {
									   			// 点击了预约按钮
												request.POST(`/system/reservbroadcast`, {
													advMembersId: response.advMembersId,
													advBroadcastId: live.advBroadcastId
												}).then(r => {
													uni.showToast({
														title: '预约成功',
														icon: 'none'
													})
													this.tabChange(3);
												})
									   		}else {
									   			// 点击了取消按钮
									   		}
									   	}
									})
								   }
							   }).catch(() => {
								   	uni.showModal({
								   		content: '请先登录'
								   	})
							   })
					})
				}
				if(live.broadstatus == 3) {
					// 已停播
					uni.showModal({
						title: '提示',
						content: '当前直播已结束',
						confirmText: '确定'
					})
				}
			},
			// 获取直播列表
			getList() {
				if(this.pageNum == 1) {
					this.isLoading = true;
				}
				request.GET('/system/broadcast/list/app', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					reasonable: false,
					showStop: this.switchValue
				}).then(response => {
					// this.liveList = response.rows;
					this.liveList.push(...response.rows)
					this.isLoading = false;
					this.pageNum = +this.pageNum + 1;
					console.log("直播列表", response.rows);
				}) 
			},
			playLive(item) {
				if(item.broadstatus === 1) {
					// 进入直播间
					
				}
				if(item.broadstatus === 2) {
					uni.showToast({
						title: '直播未开始',
						icon: 'none'
					})
				}
			},
			getReservationList() {
				// 获取直播预约列表
				GET_USER_INFO().then(response =>{
					request.GET(`/system/reservbroadcast/getreservationlist/${response.advMembersId}`, {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						reasonable: false
					}).then(res => {
							// this.reservationList = res.rows;
							this.reservationList.push(...res.rows);
							this.pageNum = this.pageNum + 1;
						})
				})
			},
			// 顶部导航栏状态改变
			tabChange(tabNum) {
				if(tabNum === 1) {
					console.log(this.userInfo.advMembersId)
					if(!this.userInfo.advMembersId) {
						uni.showModal({
							content: '请先登录'
						})
						return;
					}
					request.POST('/system/members/app_login', this.userInfo).then(response => {
						console.log(response);
						this.userInfo = response.data;
						// 表示要进行直播了, 需要先判断用户是否是主播
						console.log(this.userInfo, '用户信息')
						if(this.userInfo.isBroadcast == 1) {
							// uni.showModal({
							// 	content: '是否现在开启直播',
							// 	confirmText: '是',
							// 	cancelText: '否',
							// 	cancelColor: 'red',
							// 	success: (res) => {
							// 		var result = res.confirm;
							// 		if(result) {
										// 表示是主播
										uni.navigateTo({
											url: `/pages/live/living/living?membersId=${this.userInfo.advMembersId}`
										})
								// 	} else {
										
								// 	}
								// }
							// })
						}
						if(this.userInfo.isBroadcast != 1) {
							uni.showToast({
								title: '您当前还不是主播, 请先申请成为主播',
								icon: 'none'
							})
						}
					}).catch(error => {
						console.log(error);
						uni.showToast({
							title: '登录信息异常',
							icon: 'error'
						})
					})
				} else {
					this.pageSize = 10;
					this.pageNum = 1;
					if(tabNum === 2 && this.tabStatus != tabNum) {
						this.liveList = [];
						this.getList();
						this.tabStatus = tabNum;
					}else if(tabNum === 3 && this.tabStatus != tabNum) {
						this.reservationList = [];
						if(!this.userInfo.advMembersId) {
							uni.showModal({
								content: '请先登录'
							})
							return;
						}
						this.tabStatus = tabNum;
						if(this.deviceChoseValue) {
							this.getUserLiveByDevicesno(this.deviceChoseValue)
						} else {
							this.getReservationList();
						}
						this.getDeviceno();
					}
				}
			},
			// 播放直播
			play() {
				uni.navigateTo({
					url: '/pages/live/playing/playing'
				})
			},
		}
	}
</script>

<style lang="less">
.title {
	box-sizing: border-box;
	width: 700rpx;
	height: 30px;
	line-height: 30px;
	margin: 10px auto;
	border-left: 5px solid skyblue;
	padding-left: 10px;
	font-weight: bold;
}
.tab-bar-item {
	position: ;
	width: 100%;
	line-height: 30px;
	text-align: center;
	width: 150rpx;
	box-sizing: border-box;
}
.tab-bar-item-active {
	color: skyblue;
	border-bottom: 2px solid skyblue;
}
.live-body {
	width: 750rpx;
	padding: 10px;
	box-sizing: border-box;
}
.live-label {
	padding: 0px 5px;
	color: white;
	font-size: 12px;
	line-height: 20px;
}
.live-label-y, .live-label-ok {
	position: absolute;
	left: 0;
	top: 0;
	border-top-left-radius: 10px;
	background-color: red;
}
.live-label-living {
	position: absolute;
	right: 0;
	top: 0;
	border-top-right-radius: 10px;
	background-color: limegreen;
}

.live-reservation {
	width: 750rpx;
	box-sizing: border-box;
	.reservation-item {
		box-sizing: border-box;
		width: 700rpx;
		margin: 10px auto;
		border-radius: 10px;
		box-shadow: 0 0 10px #ddd;
		padding: 10px 10px 10px 10px;
		.top {
			width: 100%;
			height: 40px;
			.liver-info{
				height: 100%;
				.liver-icon{
					width: 30px;
					height: 30px;
					margin-right: 10px;
				}
			}
			.live-status {
				color: royalblue;
			}
		}
		.center {
			width: 100%;
			height: 50px;
			align-items: flex-start;
			.live-content {
				font-weight: bold;
			}
			.live-time {
				color: #aaa;
			}
		}
		.bottom {
			width: 100%;
			.live-image {
				width: 100%;
				height: 200px;
				border-radius: 10px;
				overflow: hidden;
			}
		}
	}
}

.content {
	position: relative;
	width: 750rpx;
}
.flex-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-column {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.flex-column-around {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.flex-row-graid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.notice {
	position: sticky;
	top: 0;
	width: 750rpx;
	height: 30px;
	background-color: moccasin;
	color: black;
	z-index: 999;
	margin-bottom: 10px;
}
.top {
	width: 750rpx;
	height: 220px;
}
.logo {
	width: 100%;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
}
.advert {
	width: 750rpx;
	height: 200px;
}
.advert-img {
	width: 100%;
	height: 100%;
}
.advert-img-logo {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
.live-label {
	padding: 0px 5px;
	color: white;
	font-size: 12px;
	line-height: 20px;
}
.live-label-y, .live-label-ok {
	position: absolute;
	left: 0;
	top: 0;
	border-top-left-radius: 10px;
	background-color: red;
}
.live-label-living {
	position: absolute;
	right: 0;
	top: 0;
	border-top-right-radius: 10px;
	background-color: limegreen;
}
</style>
